<template>
  <div>
    <Header></Header>
    <Bussiness v-show="this.$route.meta.isShow"></Bussiness>
    <router-view name="system"></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
import Darkmode from 'darkmode-js';
import AES from '@/util/crypto';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Bussiness from '@/pages/Bussiness';
export default {
  name: 'App',
  components:{
    Header,
    Footer,
    Bussiness
  },
  created(){
    // 登录成功后会再次发送请求，获取用户详细信息，因为state不能持久化数据，所以使用sessionStorage进行数据的保存，每次根组件创建时都会从会话域中获取当前登录用户信息
    if(sessionStorage.getItem("userObj")!==null){
      Object.assign(this.$store.state.login.userObj,JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))))
    }    
  },
  mounted(){
    //一键切换模式
    this.$nextTick(()=>{
      var options = {
				  bottom: '64px', // default: '32px'
				  right: 'unset', // default: '32px'
				  left: '32px', // default: 'unset'
				  time: '0.5s', // default: '0.3s'
				  mixColor: '#fff', // default: '#fff'
				  backgroundColor: '#fff',  // default: '#fff'
				  buttonColorDark: '#E0FFFF',  // default: '#100f2c'
				  buttonColorLight: '#fff', // default: '#fff'
				  saveInCookies: true, // default: true,
				  label: '🌓', // default: ''
				  autoMatchOsTheme: true // default: true
				}
				const darkmode = new Darkmode(options);
				darkmode.showWidget();
        
    })
  }
}
</script>

<style lang="css">
/* 一键切换模式 */
  .darkmode-layer, .darkmode-toggle {
      z-index: 500;
  }	
  img{
      isolation: isolate;
  }
</style>
